<!DOCTYPE html>
<%@ include file="../base.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link href="${ctx}/assets/images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <title>油站导航</title>
    <%@ include file="../js.jsp"%>
</head>
 <body ontouchstart>
	<%@ include file="../top.jsp"%>
	 <div class="page padding-b-0">
            <div class="bd">
                <div class="weui_cells" id="result_station_div">
                </div>
            </div>
     </div>
    
	<%@ include file="../bottom.jsp"%>

		<!-- loading toast -->
		<div id="loadingToast" class="weui_loading_toast"
			style="display: none;">
			<div class="weui_mask_transparent"></div>
			<div class="weui_toast">
				<div class="weui_loading">
					<div class="weui_loading_leaf weui_loading_leaf_0"></div>
					<div class="weui_loading_leaf weui_loading_leaf_1"></div>
					<div class="weui_loading_leaf weui_loading_leaf_2"></div>
					<div class="weui_loading_leaf weui_loading_leaf_3"></div>
					<div class="weui_loading_leaf weui_loading_leaf_4"></div>
					<div class="weui_loading_leaf weui_loading_leaf_5"></div>
					<div class="weui_loading_leaf weui_loading_leaf_6"></div>
					<div class="weui_loading_leaf weui_loading_leaf_7"></div>
					<div class="weui_loading_leaf weui_loading_leaf_8"></div>
					<div class="weui_loading_leaf weui_loading_leaf_9"></div>
					<div class="weui_loading_leaf weui_loading_leaf_10"></div>
					<div class="weui_loading_leaf weui_loading_leaf_11"></div>
				</div>
				<p class="weui_toast_content">数据加载中</p>
			</div>
		</div>
	</div>
	<input type="text" id="lat" />
	<input type="text" id="lng"/>
</body>
<script type="text/javascript">
	$(function(){
		Load();
	});
		
</script>
<script type="text/javascript">
	var navigation ={
	 		path : function (latitude,longitude,address,names){
					   	wx.openLocation({
					   	      latitude: latitude,
					   	      longitude: longitude,
					   	      name: names,
					   	      address: address,
					   	      scale: 14,
					   	      infoUrl: 'http://wx.wiz-tech.com.cn'
					   	  });
				  	},
	 };
 
	 wx.ready(function(){
	 	getLocation();
	 });
 
 function getLocation(){
		wx.getLocation({
		      success: function (res) {
		 		  var lat = res.latitude; // 经度，浮点数，范围为90 ~ -90
		 	      var lng = res.longitude; // 纬度，浮点数，范围为180 ~ -180。
		 	      $("#lat").val(lat);
		 	      $("#lng").val(lng);
		 	      $("#loadingToast").show();
		 	      $.ajax({
		  	      type: "POST",
		  	      url: "${ctx}/navigation/stationList",
		  	      data: {lat:lat,lng:lng},
		  	      success: function(data){
		  	    		var result = '';
		  	    	  	if(data.code == 200){
	 	    		  		var list = data.records;
			  	    		$.each(data.records, function(name, value) {
			  	    			result += '<div class="weui_cell" onclick="navigation.path('+this.lat+','+this.lng+',\''+this.province+this.city+this.address+'\',\''+this.stationName+'\')">'+
		                            '<div class="weui_cell_bd weui_cell_primary">'+
		                                '<p>'+this.stationName+'<span class="navi-address">'+this.province+this.city+this.address+'</span></p></div>'+
			                            '<div class="weui_cell_ft text-black">'+this.distance/1000+'km</div>'+
			                            '<img class="navi-icon" src="${ctx}/assets/images/navigation.png">'+
		                        '</div>';
			  	    		});
			  	    		$("#result_station_div").append(result);
			  	    		$("#loadingToast").hide();
		  	    	  	}else{
				  	        alert("加油站列表加载失败！");
				  	      	$("#loadingToast").hide();
		  	    	  	}
		  	      }
		     	});
	 		},
	 		cancel: function (res) {
	        	alert('你拒绝授权获取地理位置，无法获取油站列表！');
	       	}
		});
	}

</script>
</html>